<template>
  <div class="detail">
      <Header title="详情页" >
          <template v-slot:left>
              <span @click="$router.go(-1)">&lt;</span>
          </template>
      </Header>
       <div class="list">
            <div class="item" >
                <div class="pic">
                    <img :src="$route.params.pic" alt="">
                </div>
                <div class="text">
                    <div class="name">{{$route.params.name}}</div>
                    <div class="buycount">已售: {{$route.params.ys}}件</div>
                    <div class="price">单价: ¥{{$route.params.dj}}</div>
                </div>
                <div class="btn" @click="addlist($route.params)">
                     <span v-if="$route.params.count<1">加入购物车</span>
            <span v-else>已添加</span></div>
                    </div>
            </div>
        </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {
methods:{
    ...mapMutations(['addlist'])
}
}
</script>

<style lang="scss">
.header{
    width: 100%;
    height: 40px;
    display: flex;
    background: #eee;
    div{
    flex: 1;
    text-align: center;
    line-height: 40px;
    }
}
.item{
    position: relative;
}
.btn {
      position: absolute;
      bottom: 20px;
      right: 20px;
      span{
     background: red;
      color: #fff;
      padding: 3px 6px;
      }
    }
</style>